<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型相关属性详解</title>
    <style>
        body {
            font-size: 14px;
        }
        section {
            margin: 60px;
        }

        pre {
            border: 1px solid rgba(0, 0, 0, 0.5);
            width: 300px;
            margin: 10px;
            color: #286090;
        }

        .one {
            padding: 20px;
        }
        .two {
            padding: 20px 40px;
        }
        .three {
            padding: 20px 40px 60px;
        }
        .four {
            padding: 20px 40px 60px 80px;
        }

        .merge {
            border: 2px solid #286090;
        }
        .split {
            border-width: 2px;
            border-color: #286090;
            border-style: solid;
        }

    </style>
</head>
<body>

<section>
<h2>padding</h2>
<pre class="one">
.one {
    padding: 20px;
}
</pre>
<pre class="two">
.two {
    padding: 20px 40px;
}
</pre>
<pre class="three">
.three {
    padding: 20px 40px 60px;
}
</pre>
<pre class="four">
.four {
    padding: 20px 40px 60px 80px;
}
</pre>
</section>

<section>
<h2>border</h2>
<pre class="merge">
.merge {
    border: 2px solid #286090;
}
</pre>
<pre class="split">
.split {
    border-width: 2px;
    border-color: #286090;
    border-style: solid;
}
</pre>
</section>

</body>
</html>